<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	</head>
	<style>
		.aui-list-view-cell {
			line-height: 30px;
		}
		.hidden {
			display: none;
		}
		.aui-counter-minus:active {
			color: #F1C40F;
		}
		.aui-counter-plus:active {
			color: #F1C40F;
		}
	</style>
	<body>
		<div class="aui-content aui-card"></div>
		<div class="aui-content aui-card">
			<ul class="aui-list-view">
				<li class="aui-list-view-cell lineStyle">
					<div class="aui-switch-title">
						画笔颜色
					</div>
					<input style="position:absolute;left:3000px;" type="color" id="color1" />
					<button id="btn1"  class="aui-pull-right">
						选择颜色
					</button>
				</li>
				<li class="aui-list-view-cell lineStyle">
					<div class="aui-switch-title">
						笔画宽度
					</div>
					<div class="aui-counter aui-pull-right">
						<div class="aui-counter-minus" ></div>
						<input class="aui-counter-input" type="number" value="1" max="3" min="0.5" readonly id="lineWidth">
						<div class="aui-counter-plus"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="aui-content aui-card" id="grid">
			<ul class="aui-list-view">
				<li class="aui-list-view-cell">
					<div class="aui-switch-title">
						背景颜色
					</div>
					<input style="position:absolute;left:3000px;" type="color" id="color2" />
					<button id="btn2"  class="aui-pull-right">
						选择颜色
					</button>
				</li>
				<li class="aui-list-view-cell aui-switch-body">
					<div class="aui-switch-title">
						背景网格
					</div>
					<input type="checkbox" class="aui-switch aui-pull-right" checked onclick="Change(this,'gridStyle')" tapmode="" id="gridShow" name="gridStyle">
				</li>
				<li class="aui-list-view-cell gridStyle">
					<div class="aui-switch-title">
						网格颜色
					</div>
					<input style="position:absolute;left:3000px;" type="color" id="color3" />
					<button id="btn3"  class="aui-pull-right">
						选择颜色
					</button>
				</li>
				<li class="aui-list-view-cell gridStyle">
					<div class="aui-switch-title">
						网格水平间隔
					</div>
					<div class="aui-counter aui-pull-right">
						<div class="aui-counter-minus"></div>
						<input class="aui-counter-input" type="number" value="20" max="80" min="10" id="gridxWidth" readonly >
						<div class="aui-counter-plus"></div>
					</div>
				</li>
				<li class="aui-list-view-cell gridStyle">
					<div class="aui-switch-title">
						网格垂直间隔
					</div>
					<div class="aui-counter aui-pull-right">
						<div class="aui-counter-minus"></div>
						<input class="aui-counter-input" type="number" value="20" max="80" min="10" id="gridyWidth" readonly>
						<div class="aui-counter-plus"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="aui-content aui-card" id="point">
			<ul class="aui-list-view">
				<li class="aui-list-view-cell aui-switch-body">
					<div class="aui-switch-title">
						签名关键点
					</div>
					<input type="checkbox" class="aui-switch aui-pull-right" checked onclick="Change(this,'pointStyle')" tapmode="" id="pointShow" name="pointStyle">
				</li>
				<li class="aui-list-view-cell pointStyle">
					<div class="aui-switch-title">
						关键点颜色
					</div>
					<input style="position:absolute;left:3000px;" type="color" id="color4" />
					<button id="btn4"  class="aui-pull-right">
						选择颜色
					</button>
				</li>
				<li class="aui-list-view-cell pointStyle">
					<div class="aui-switch-title">
						关键点半径
					</div>
					<div class="aui-counter aui-pull-right">
						<div class="aui-counter-minus"></div>
						<input class="aui-counter-input" type="number" value="2" max="5" min="1" id="radius" readonly name="pointStyle">
						<div class="aui-counter-plus"></div>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/zepto.js"></script>
	<script type="text/javascript">
		function Change(obj, style) {
			var list = $api.domAll('.' + style);
			console.log(obj.checked);
			if (obj.checked) {
				for (var i = 0; i < list.length; i++)
					$api.addCls(list[i], 'hidden');
			} else {
				for (var i = 0; i < list.length; i++)
					$api.removeCls(list[i], 'hidden');
			}			
			var name=$api.attr(obj, 'name');
			console.log(name);
			console.log(obj.checked);
			param[name].isShow=!obj.checked;
			//SaveParam();
		}

		function AddChange(obj, style) {
			var list = $api.domAll('.' + style);
			console.log(obj.checked);
			if (obj.checked) {
				for (var i = 0; i < list.length; i++)
					$api.removeCls(list[i], 'hidden');
			} else {
				for (var i = 0; i < list.length; i++)
					$api.addCls(list[i], 'hidden');
			}
		}

		$api.byId('btn1').onclick = function() {
			$api.byId('color1').click();
		};
		$api.byId('color1').onchange = function() {
			$api.byId('btn1').style.background = this.value;
			param.lineStyle.color=this.value;
			if(this.value=="#000000")
				$api.byId('btn1').style.color='#fff';	
			else
				$api.byId('btn1').style.color='#000';	
		};
		
		
		$api.byId('btn2').onclick = function() {
			$api.byId('color2').click();
		};
		$api.byId('color2').onchange = function() {
			$api.byId('btn2').style.background = this.value;			
			param.gridStyle.background=this.value;		
			if(this.value=="#000000")
				$api.byId('btn2').style.color='#fff';
			else
				$api.byId('btn2').style.color='#000';	
		};	
		
		$api.byId('btn3').onclick = function() {
			$api.byId('color3').click();
			if(this.value=="#000000")
				$api.byId('btn3').style.color='#fff';
			else
				$api.byId('btn3').style.color='#000';	
		};
		$api.byId('color3').onchange = function() {
			$api.byId('btn3').style.background = this.value;
			param.gridStyle.color=this.value;
			if(this.value=="#000000")
				$api.byId('btn3').style.color='#fff';
			else
				$api.byId('btn4').style.color='#000';	
		};		
		
		$api.byId('btn4').onclick = function() {
			$api.byId('color4').click();
		};
		$api.byId('color4').onchange = function() {
			$api.byId('btn4').style.background = this.value;
			param.pointStyle.color=this.value;
			//SaveParam();
			if(this.value=="#000000")
				$api.byId('btn4').style.color='#fff';	
		};
		function getOffset(el) {
			var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
			var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
			var rect = el.getBoundingClientRect();
			return {
				l : rect.left + sl,
				t : rect.top + st,
				w : el.offsetWidth,
				h : el.offsetHeight
			};
		};
		//var Ranges={pen:{min:0.5,max:3.5,step:0.5},gridx:{min:10,max:80,step:10},gridy:{min:10,max:80,step:10},radius:{min:1,max:5,step:1}};
		var Ranges = [{
			value : 1,
			min : 0.5,
			max : 3,
			step : 0.5
		}, {
			value : 20,
			min : 10,
			max : 80,
			step : 10
		}, {
			value : 20,
			min : 10,
			max : 80,
			step : 10
		}, {
			value : 1,
			min : 1,
			max : 5,
			step : 1
		}];
		function plus(i, el) {
			var val = Ranges[i].value;
			var min = Ranges[i].min;
			var max = Ranges[i].max;
			var step = Ranges[i].step;
			val += step;
			var next = $api.next(el);
			var prev = $api.prev(el);
			if (val >= max) {
				val = max;
				$api.addCls(next, 'aui-disabled');
			}
			$api.removeCls(prev, 'aui-disabled');
			$api.val(el, val);
			Ranges[i].value = val;
		};
		function minus(i, el) {
			var val = Ranges[i].value;
			var min = Ranges[i].min;
			var max = Ranges[i].max;
			var step = Ranges[i].step;
			val -= step;
			var next = $api.next(el);
			var prev = $api.prev(el);
			if (val <= min) {
				val = min;
				$api.addCls(prev, 'aui-disabled');
			}
			$api.removeCls(next, 'aui-disabled');
			$api.val(el, val);
			Ranges[i].value = val;
		};
		function getKeyPos(x, y, rect) {
			var ll1 = rect.l - rect.h;
			var ll2 = rect.l;
			var rl1 = rect.l + rect.w;
			var rl2 = rl1 + rect.h;
			var lt1 = rect.t;
			var lt2 = rect.t + rect.h;
			if (y >= lt1 && y <= lt2) {
				if (x >= ll1 && x <= ll2) {
					return 'minus';
				} else if (x >= rl1 && x <= rl2) {
					return 'plus';
				} else {
					return '';
				}
			}
		}
		var lineColor = $api.byId('btn1');
		var bkColor = $api.byId('btn2');
		var gridColor = $api.byId('btn3');
		var pointColor = $api.byId('btn4');
		var lineWidth = $api.byId('lineWidth');
		var gridxWidth = $api.byId('gridxWidth');
		var gridyWidth = $api.byId('gridyWidth');
		var radius = $api.byId('radius');
		var point = $api.byId('point');
		var grid = $api.byId('grid');
		var pointShow = $api.byId('pointShow');
		var gridShow = $api.byId('gridShow');
		var param1 = {
			lineStyle : {
				width : 1.5,
				color : "#5adf20", //绿色
				kind : 0,
				mode : "round",
				isShow : true
			},
			gridStyle : {
				width : 0.5,
				background : '#000',
				color : "#ccc",
				mode : "round",
				isShow : false,
				sw : 30,
				sh : 30
			},
			pointStyle : {
				r : 1,
				color : "#5ad120",
				isShow : false,
				isInterpolation : true
			}
		}		
		function extend(target, source) {
			for (var p in source) {
				if (source.hasOwnProperty(p)) {
					target[p] = source[p];
				}
			}
			return target;
		};		
		var param={};		
		function SaveParam(){		
			param.lineStyle.width=Ranges[0].value;
			param.gridStyle.sw=Ranges[1].value;
			param.gridStyle.sh=Ranges[2].value;
			param.pointStyle.r=Ranges[3].value;			
			$api.setStorage('param',param);		
		}
		
		apiready = function() {		
			param=extend(param1,$api.getStorage('param')||{});			
			lineColor.style.background = param.lineStyle.color;			
			bkColor.style.background = param.gridStyle.background;
			gridColor.style.background = param.gridStyle.color;
			pointColor.style.background = param.pointStyle.color;
			
			console.log(param.gridStyle.background);
			if(param.lineStyle.color=="#000000"||param.lineStyle.color=="#000")
				$api.byId('btn1').style.color='#fff';					
			if(param.gridStyle.background=="#000000"||param.gridStyle.background=="#000")
				$api.byId('btn2').style.color='#fff';				
			if(param.gridStyle.color=="#000000"||param.gridStyle.color=="#000")
				$api.byId('btn3').style.color='#fff';					
			if(param.pointStyle.color=="#000000"||param.pointStyle.color=="#000")
				$api.byId('btn4').style.color='#fff';
			
			lineWidth.value = param.lineStyle.width;
			gridxWidth.value = param.gridStyle.sw;
			gridyWidth.value = param.gridStyle.sh;
			radius.value = param.pointStyle.r;			
			Ranges[0].value=param.lineStyle.width;
			Ranges[1].value=param.gridStyle.sw;
			Ranges[2].value=param.gridStyle.sh;
			Ranges[3].value=param.pointStyle.r;	
							
			if (param.gridStyle.isShow)			
				gridShow.checked = true;
			else
				gridShow.checked = false;
			AddChange(gridShow, 'gridStyle');
			if (param.pointStyle.isShow)
				pointShow.checked = true;
			else
				pointShow.checked = false;
			AddChange(pointShow, 'pointStyle');
			$(document.body).on('touchstart', function(evt) {
				if (!evt.touches.length)
					return;
				var touch = evt.touches[0];
				//console.log(touch.pageX + "," + touch.pageY);
				var nums = $api.domAll('input[type=number]');
				var rects = [];
				var x = touch.pageX;
				var y = touch.pageY;
				for (var i = 0; i < nums.length; i++) {
					var rect = getOffset(nums[i]);
					rects.push(rect);
					var str = getKeyPos(x, y, rect);
					if (str == 'minus') {
						minus(i, nums[i]);
					} else if (str == 'plus') {
						plus(i, nums[i]);
					}
				}
			});
		}
	</script>
</html>